<template>
    <div class="tmpl">
        <!-- 1.0 标题 -->
        <div class="title">
            <h4>{{photoInfo.title}}</h4>
            <p>{{photoInfo.add_time | dateFmt('YYYY-MM-DD')}}&nbsp;{{photoInfo.click}}次浏览</p>
        </div>
        <!-- 2.0 缩略图 -->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li v-for="(item, index) in thumimageList" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, thumimageList)">
                </li>
            </ul>
        </div>
        <!-- 3.0 图片详情的内容 -->
        <div class="content" v-html="photoInfo.content"></div>
        <!-- 4.0 评论组件 -->
        <subcomment :commentId="this.$route.params.photoId"></subcomment>
    </div>
</template>

<style scoped>
    /**
        标题样式
    */
    .title{
        padding: 5px;
        border-bottom: 2px solid rgba(92,92,92,0.3);
        height: 100%;
    }

    .title h4{
        font-size: 16px;
        font-weight: bold;
        color:#0094ff;
    }

    .title p {
        font-size: 12px;
        color: #777777;
    }

    .content{
        padding: 5px;
        font-size: 14px;
        color: #777777;
    }
</style>

<script>
    import common from '../../tools/common.js';

    //1.导入
    import subcomment from '../subcomponent/subcomment.vue';

    export default{
        data(){
            return {
                photoInfo : {},
                thumimageList:[]
            };
        },
        created(){
            this.getPhotoInfoData();
            this.getThumimagesData();
        },
        methods:{
            getPhotoInfoData(){
                //1.url
                const url = common.apihost+"api/getimageInfo/"+this.$route.params.photoId;

                //2.send request
                this.$http.get(url).then(res=>{
                    //console.log(res.body.message);
                    this.photoInfo = res.body.message[0];
                },err=>{
                    console.log(err);
                })
            },
            //获取缩略图
            getThumimagesData(){
                //url
                const url = common.apihost + "api/getthumimages/"+this.$route.params.photoId;

                //send request
                this.$http.get(url).then(res=>{
                    //console.log(res.body.message);
                    res.body.message.forEach(item=>{
                        item.w = 600;
                        item.h = 400;
                    })
                    this.thumimageList = res.body.message;
                },err=>{
                    console.log(err);
                })
            }
        },
        components:{//2.注册
            subcomment:subcomment
        }
    }
</script>